<template>
  <div class="contentTable">
    <div class="contentTableTop">
      <div class="contentTableTitle">职业</div>
      <!-- <div class="contentTableForm">
        <el-form ref="form" :model="form" inline>
          <el-form-item label="筛选:">
            <el-select v-model="form.type" size="small" filterable placeholder="请选择" @change="handleFilterTypeChange">
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div> -->
    </div>
    <div class="contentTableContent col-sm-2a col-md-2a col-lg-3a col-xl-5a col-xxl-6a col-xxxl-7a col-xxxxl-8a"
      v-loading="loading" v-if="contentList.length">
      <template>
        <div class="careerItem" v-for="(itemThird, indexThird) in contentList" :key="itemThird.positionId"
          @click="handleContentClick(itemThird, indexThird)" :class="isEdit ? 'careerItemRed' : ''">
          <div class="careerName">
            {{ itemThird.positionName }}
            <div class="del" v-if="isEdit">×</div>
          </div>
          <div class="careerCate">
            {{ `${itemThird.topName||'--'} · ${itemThird.parentName||'--'}` }}
          </div>
          <div class="careerCategory">
            <div>
              {{ `${itemThird.positionDesc || "暂无描述"}` }}
            </div>
          </div>
        </div>
      </template>
    </div>
    <el-empty class="empty" description="暂无收藏内容" v-else></el-empty>
  </div>
</template>

<script>
import { collectPositionList } from "@/api/home.js";
export default {
  name: "careerTable",
  components: {},
  data() {
    return {
      isEdit: false,
      contentList: [],
      form: {
        type: "1",
      },
      typeList: [
        {
          label: "全部",
          value: "1",
        },
        {
          label: "行业",
          value: "2",
        },
        {
          label: "职业",
          value: "3",
        },
      ],
      loading: false,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;
      const params = {
        page: 1,
        searchPhotoType: 1,
      };
      collectPositionList(params)
        .then((res) => {
          if (res.code == 200) {
            this.contentList = res.data;
          } else {
            console.log(res);
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleContentClick(item, index) {
      let routeData = this.$router.resolve({
        path: "/position-detail",
        query: {
          // fatherTitle: `${item.topTitle} · ${item.parentTitle}`,
          id: item.ylPositionId || item.positionId,
          name: item.positionName,
          superToken: this.$route.query.superToken || "",
          SecretKey: this.$route.query.SecretKey || "",
          customerName: this.$route.query.customerName,
          collect: true,
        },
      });
      window.open(routeData.href, "_blank");
    },
    handleFilterTypeChange(val) {
      this.fetchData();
    },
  },
};
</script>

<style lang="scss" scoped>
.contentTable {
  flex: 1;
  padding: 24px 24px;
  padding-right: 0px;
  .contentTableTop {
    display: flex;
    align-items: center;
    .contentTableTitle {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      margin-right: 32px;
      // margin-top: 5px;
    }
    .contentTableForm {
      ::v-deep .el-form-item {
        margin-bottom: 0px;
      }
    }
  }
  .contentTableContent {
    width: 100%;
    display: grid;
    // grid-auto-rows: 88px; /* 设置行高为88px */
    row-gap: 8px; /* 设置行间距 */
    column-gap: 16px; /* 设置列间距 */
    padding-top: 14px;
    max-height: calc(100vh - 170px);
    overflow-y: scroll;
    padding-right: 24px;
    &::-webkit-scrollbar-track-piece {
      background: #fff;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #d8d8d8;
      border-radius: 20px;
    }
    .empty {
      flex: 1;
      min-height: 500px;
    }
    .careerItem {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid #ededed;
      padding: 0;
      height: 108px;
      width: 261px;
      // margin: 1%;
      margin-right: 8px;
      margin-bottom: 16px;
      background: #fff;
      border-radius: 9px;
      transition: 0.2s ease-out;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.2s;
      &:hover {
        border-color: #0b6eff;
        transform: translateY(-10%);
        .careerName {
          color: #0b6eff;
        }
        .careerCategory {
          background: #0b6eff;
          color: #fff;
        }
      }
      .careerName {
        height: 48px;
        font-size: 16px;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #222222;
        display: flex;
        align-items: center;
        line-height: 22px;
        padding-left: 15px;
        padding-right: 40px;
        padding-top: 2px;
        position: relative;
        transition: all 0.5s;
        .collect {
          position: absolute;
          width: 18px;
          height: 18px;
          right: 12px;
        }
      }
      .careerCate {
        padding-left: 15px;
        padding-bottom: 5px;
        color: #999;
        margin-bottom: 2px;
      }
      .careerCategory {
        position: relative;
        display: flex;
        align-items: center;
        padding-left: 15px;
        width: 100%;
        height: 36px;
        background: linear-gradient(
          276deg,
          rgba(218, 240, 247, 0.1) 0%,
          rgba(230, 240, 255, 0.3) 100%
        );
        border-radius: 0px 0px 6px 6px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9cabb7;
        line-height: 20px;
        // transition: all 0.5s;
        div {
          width: 90%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }

  @media (min-width: 576px) {
    .col-sm-2a {
      grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));
    }
  }
  @media (min-width: 995px) {
    .col-lg-3a {
      grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
    }
  }
  @media (min-width: 1300px) {
    .col-lg-3a {
      grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    }
  }
  @media (min-width: 1500px) {
    .col-xl-5a {
      grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
    }
  }
  @media (min-width: 1800px) {
    .col-xxl-6a {
      grid-template-columns: repeat(auto-fill, minmax(14.6%, 1fr));
    }
  }
  @media (min-width: 2200px) {
    .col-xxxl-7a {
      grid-template-columns: repeat(auto-fill, minmax(11%, 1fr));
    }
  }
  @media (min-width: 2600px) {
    .col-xxxxl-8a {
      grid-template-columns: repeat(auto-fill, minmax(10%, 1fr));
    }
  }
}
</style>